{% extends "layout.html" %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h3>{{ action }}</h3>
        </div>
    </div>

    <form action="" method="post" name="save" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="{{ form.project_name.id }}" class="control-label">{{ form.project_name.label }}</label>
                <div>
                    {{ form.project_name(class_="form-control", onfocusout="searchProject()") }}
                </div>
                <span id="name_error" style="color: red;"></span>
                {% for error in form.project_name.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
            </div>
        </div>

        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="{{ form.project_website.id }}" class="control-label">{{ form.project_website.label }}</label>
                <div>
                    {{ form.project_website(class_="form-control") }}
                </div>
                {% for error in form.project_website.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
            </div>

            <div class="form-group col-md-6">
                <label for="{{ form.licenses.id }}" class="control-label">{{ form.licenses.label }}</label>
                <div>
                    {{ form.licenses(class_="selectpicker", **{'data-live-search':'true', 'data-width':'100%'}) }}
                </div>
                {% for error in form.licenses.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
            </div>
        </div>

        <div class="form-row">
            <div class="form-group col-md-12">
                <label for="{{ form.project_description.id }}" class="control-label">{{ form.project_description.label }}</label>
                <div>
                    {{ form.project_description(class_="form-control") }}
                </div>
                {% for error in form.project_description.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
            </div>
        </div>


        <div class="form-group">
            <div class="">
                {{ form.submit(class_="btn btn-default") }}
            </div>
        </div>
    </form>
</div><!-- /.container -->
<script>
$(document).ready(function() {
    $('.selectpicker').selectpicker();
    tinymce.init({
        selector: 'textarea',
        height: 500,
        menubar: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor textcolor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table contextmenu paste code help'
        ],
        toolbar: 'insert | undo redo |  formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
        content_css: [
          '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
          '//www.tinymce.com/css/codepen.min.css']
    });
});
function searchProject() {
    var url = "{{ url_for('projectapi0.projectapi',) }}";
    var project_name = document.getElementById("project_name").value;
    if ('' == project_name) {
        return;
    }
    filters = [{"name":"name","op":"ilike","val":project_name}];
    $.ajax({ // Get the list of projects
        url: url,
        data: {"q": JSON.stringify({"filters": filters})},
        dataType: "json",
        contentType: "application/json",
        success: function(result) {
            if (result.num_results != 0) {
                document.getElementById("name_error").textContent = 'A project with the same name already exists.';
            } else {
                document.getElementById("name_error").textContent = '';
            }
        }
    });
}
</script>
{% endblock %}
